<template>
  <card :title="title">
    <div class="chart">
      <div :id="`reportChart-${type}`"></div>  
    </div>
  </card>
</template>
<script>
import Highcharts from 'highcharts'
export default {
  name: 'Chart',
  props: {
    param: {
      type: Object,
      default: () => ({})
    },
    apps: {
      type: Array,
      default: () => []
    },
    total: {
      type: String,
      default: '注册用户分析'
    },
    title: {
      type: String,
      default: '总注册用户数'
    },
    ylabel: {
      type: String,
      default: '注册数'
    },
    type: {
      type: String,
      default: 'register'
    }
  },
  mounted () {
    // this.getData()
  },
  // created () {
  //   this.$api.get('assistant/opening').then(req => {
  //     this.apps = req || []
  //     if (this.apps.length > 0) {
  //       this.source_app = this.apps[0].source_app
  //       this.getData()
  //     }
  //   })
  // },
  data () {
    return {
      option: {
        title: {
          text: this.title
        },
        credits: {
          enabled: false
        },
        tooltip: {
          shared: true,
          dateTimeLabelFormats: {
            year: '%Y',
            month: '%Y-%m',
            day: '%Y-%m-%d',
            week: '%Y-%m-%d',
            hour: '%Y-%m-%d %H时'
          }
        },
        yAxis: {
          title: {
            text: this.ylabel
          }
        },
        xAxis: {
          type: 'datetime',
          dateTimeLabelFormats: {
            year: '%Y',
            month: '%Y-%m',
            day: '%Y-%m-%d',
            week: '%Y-%m-%d',
            hour: '%Y-%m-%d %H时'
          }
        },
        series: [],
        legend: {
          layout: 'vertical',
          x: 100,
          y: 120,
          align: 'left',
          verticalAlign: 'top',
          floating: true,
          backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        }
      }
    }
  },
  methods: {
    draw () {
      let reportChart = document.getElementById(`reportChart-${this.type}`)
      if (!reportChart) { // reportChart若为空时则不开始画图片
        return
      }
      Highcharts.chart(reportChart, this.option)
    },
    getData () {
      this.isLoading = true
      this.$set(this.option, 'series', [])
      this.$api.get(`statistics/${this.type}`, this.param).then(req => {
        this.isLoading = false
        let plotOptions = {
          series: {
            pointStart: (new Date(this.param.start_date.replace(/-/g, '/'))).getTime() + 8 * 3600 * 1000,
            pointInterval: 24 * 3600 * 1000 // 一天或者一小时
          }
        }
        console.log(this.param.source_app)
        let app = this.apps.find(item => item.source_app === this.param.source_app) || {}
        let name = this.type === 'register' ? '去重前' : app.app_name || ''
        let series = [
          {
            name,
            data: req.data
          },
          ...this.option.series
        ]
        let title = {
          text: `${this.total}:${req.total}`
        }
        this.$set(this.option, 'plotOptions', plotOptions)
        this.$set(this.option, 'series', series)
        this.$set(this.option, 'title', title)
        this.draw()
      })
      if (this.type === 'register') { // 新增注册数 去重后数据
        this.$api.get(`statistics/${this.type}`, {...this.param, is_distinct: true}).then(req => {
          let series = [
            ...this.option.series,
            {
              name: '去重后',
              data: req.data,
              color: '#15b6e4'
            }
          ]
          this.$set(this.option, 'series', series)
          this.draw()
        })
      }
    }
  },
  watch: {
    param () {
      this.getData()
    }
  }
}
</script>
<style lang="scss" scoped>
.chart{
  padding: 10px 20px;
}
</style>

